
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>发表</title>
	</head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="" name="keywords">
    <meta content="" name="description">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<style type="text/css">
		body{
			    font-family: 'Helvetica Neue',Helvetica,sans-serif;
			    font-size: 17px;
			    line-height: 21px;
			    color: #000;
			    margin: 0px;
			    padding: 0px;
			}
			
		div.showtitle{
			width:100%;
			height: 40px;
			background: chartreuse;
		}
		
		div.showtitle span{
			line-height: 40px;
			text-align: center;
		    font-size: 30px;
		}
		
		.col-sm-6{
			float: left;
			width: 200px;
		}
		
		.fa-plus-circle{
			position: absolute;
			top: 0px;
			right: 0px;
		}
		.mui-bar-nav {
				    top: 0;
				    -webkit-box-shadow: 0 1px 6px #ccc;
				    box-shadow: 0 1px 6px #ccc;
				}
				
				.mui-bar {
				    position: fixed;
				    z-index: 10;
				    right: 0;
				    left: 0;
				    height: 44px;
				    padding-right: 10px;
				    padding-left: 10px;
				    border-bottom: 0;
				    background-color:RGB(88,88,88);
				}
				
				.mui-bar-nav.mui-bar .mui-icon {
				    /*margin-right: -10px;*/
				    margin-left: -10px;
				    padding-right: 10px;
				    padding-left: 10px;
				}
				.mui-bar .mui-icon {
				    font-size: 24px;
				    position: relative;
				    z-index: 20;
				    padding-top: 10px;
				    padding-bottom: 10px;
				}
				.mui-icon {
				    font-family: Muiicons;
				    font-size: 24px;
				    font-weight: 400;
				    font-style: normal;
				    line-height: 1;
				    display: inline-block;
				    text-decoration: none;
				    -webkit-font-smoothing: antialiased;
				}
				.mui-pull-left {
				    float: left;
				}
				a {
				    text-decoration: none;
				    color: #FC605A;
				}
				a {
				    background: 0 0;
				}
				
				.mui-bar .mui-title {
				    right: 201px;
				    left: 40px;
				    top: 4px;
				    display: inline-block;
				    overflow: hidden;
				    width: auto;
				    margin: 0;
				    text-overflow: ellipsis;
				}
				.mui-title {
				    font-size: 17px;
				    font-weight: 500;
				    line-height: 44px;
				    position: absolute;
				    display: block;
				    width: 100%;
				    margin: 0 -10px;
				    padding: 0;
				    text-align: center;
				    white-space: nowrap;
				    color: #fff;
				}
				
				.mine-photo{
			    	width: 100%;
				    background-image: url(img/curry.jpg);
				    height: 18rem;
				    background-repeat: no-repeat;
				    text-align: center;
				    position: relative;
				    color: #fff;
				    width: 320px;
				    height: 320px;
			    }
			    
			    .mine-photo img {
				    width: 80px;
				    height: 80px;				    
				    border: solid 1px #fff;
				    margin-top: 86%;
				    margin-right: -67%;
				}
				.empty{
					width: 100%;
					height: 36px;
				}
				
				.userid{
					position: absolute;
					left: 30px;
				}
				.title{
					position: absolute;
					left: 87px;
					top: 32px;
				}
		
		.camera{
			width: 50px;
			height: 50px;
			position: absolute;
			top: 150px;
				}
		
		.text{
			width: 100%;
			height: 100px;
			position: absolute;
			top: 44px;
		}
		.sharing{
			position: absolute;
			top: 170px;
			right: 0px;
			width: 66px;
			height: 33px;
			font-weight: bold;
			background-color: green;
			color: #FFFAFA;
			border: 1px solid green;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><img src="img/left_fri.png"/></a>
			<h1 class="mui-title">分享</h1>
		</header>
<form action="javascript:;" method="post" enctype="multipart/form-data" onsubmit="tijiao()" class="biaodan">
            
            <textarea class="text text1" placeholder="分享心得" name="title" ></textarea>
            <label for="inFile" class="cam" id="cam"><img src="img/camera1.png" class="camera"/></label>
            <input type="file" id="inFile" name="thumb0"/>
            <input type="submit" class="sharing" value="发布">
</form>
	<script type="text/javascript">
function tijiao(){
       var id=window.localStorage.getItem('userid');
	   var txt=$(".text1").val();
       var url="http://172.24.10.175/workout/api.php/fcreate/SessionID/1set9n4vfeaj51jmc2pcnncg71/mod/shaitu/userid/"+id+"/title/"+txt;
        $(".biaodan").ajaxSubmit({
            url:url,
            dataType: 'json',
            beforeSubmit : function() {
                alert("发布成功");
                location.href="showpicture.html";
            },
        })

    }
    $(function(){
        $("#inFile").on("change",function () {
            $(".xianshi").show();
            $(".tu").append("<a href='javascript:;' class='close'>×</a>");
            $(".close").show().click(function(){
                var file = $("#inFile") ;
                file.after(file.clone().val(""));
                file.remove();
            });
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#xianshi");

            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
    });
	</script>
	</body>
</html>